<script setup>
	//需求：无缝滚动。
	//思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候
	//     直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到
	//     第一张图片，然后滑动到第二张
	//步骤：
	//1.获取事件源及相关元素。（老三步）
	//2.复制第一张图片所在的li,添加到ul的最后面。
	//3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
	//4.鼠标放到ol的li上切换图片
	//5.添加定时器
	//6.左右切换图片（鼠标放上去隐藏，移开显示）
	import { computed, onMounted, ref, useTemplateRef } from "vue"
	import banner1 from "../assets/banner/1.jpg"
	import banner2 from "../assets/banner/2.jpg"
	import banner3 from "../assets/banner/3.jpg"
	import banner4 from "../assets/banner/4.jpg"
	import banner5 from "../assets/banner/5.jpg"
	import { log } from "xstate"
	
	const imgWidth = 500
	const ulTargetLeft = ref(0)
	const banners = ref([banner1,banner2,banner3,banner4,banner5,banner1])
	const tag = computed(()=>{
		return banners.value.length - 1
	})
	
	const currentIndex = ref(1)
	
	function pointerTag(index) {
		currentIndex.value = index;
		var target = -((index - 1) * imgWidth)
		animate(target)
	}
	
	var animateTimer = undefined
	function animate(target){
		clearInterval(animateTimer)
		let speed = target > ulTargetLeft.value ? 10 : -10;
		animateTimer = setInterval(function(){
			var val = target - ulTargetLeft.value;
			ulTargetLeft.value += speed
			 if(Math.abs(val) < Math.abs(speed)){
				 ulTargetLeft.value = target;
				 clearInterval(animateTimer)
			 }
		}, 10)
	}
	
	var autoPlayTimer = setInterval(autoPlay,1000);
	var key = 1;
	//固定向右切换图片
	function autoPlay() {
		key++;
		if(key > banners.value.length){
			ulTargetLeft.value = 0;
			key = 2;
		}
		var target = -((key - 1) * imgWidth)
		animate(target)
		
		if(key > banners.value.length - 1){
			currentIndex.value = 1
		} else {
			currentIndex.value = key
		}
	}
	
	function backPlay(){
		key--;
		if(key < 1){
			ulTargetLeft.value = -imgWidth * (banners.value.length);
			key = banners.value.length;
		}
		var target = -((key - 1) * imgWidth)
		animate(target)
		if(key > banners.value.length - 1){
			currentIndex.value = 1
		} else {
			currentIndex.value = key
		}

	}
	

	
	const getItemStyle = (index) => {
		if(currentIndex.value == index){
			return {backgroundColor:'#ffff00'}
		} else {
			return {backgroundColor:'#ffffff'}
		}
	};
	
	const arrDisplay = ref('none');
	
	function clearAutoPlay(){
		arrDisplay.value = 'block';
		clearInterval(autoPlayTimer);
	}
	
	function startAutoPlay(){
		arrDisplay.value = 'none';
		autoPlayTimer = setInterval(autoPlay, 1000);
	}

</script>

<template>
	<h1>轮播图</h1>
	<div class="all" id='all' @mouseover="clearAutoPlay()" @mouseout="startAutoPlay()">
		<div class="screen" id="screen">
		    <ul id="ul" ref="image-ul" :style="{left:ulTargetLeft + 'px'}">
				<li v-for="banner in banners">
					<img :src="banner" :width="imgWidth" height="200"/>
				</li>
		    </ul>
		    <ol>
				<li v-for="i in tag" @mouseover="pointerTag(i)" :style="getItemStyle(i)">{{i}}</li>
		    </ol>
		    <div id="arr" :style="{display:arrDisplay}">
		        <span id="left" @click="backPlay()"><</span>
		        <span id="right" @click="autoPlay()">></span>
		    </div>
		</div>
		
	</div>
</template>

<style scoped>
	* {
	    padding: 0;
	    margin: 0;
	    list-style: none;
	    border: 0;
	}
	
	.all {
	    width: 500px;
	    height: 200px;
	    padding: 7px;
	    border: 1px solid #ccc;
	    margin: 100px auto;
	    position: relative;
	}
	
	.screen {
	    width: 500px;
	    height: 200px;
	    overflow: hidden;
	    position: relative;
	}
	
	.screen li {
	    width: 500px;
	    height: 200px;
	    overflow: hidden;
	    float: left;
	}
	
	.screen ul {
	    position: absolute;
	    left: 0;
	    top: 0px;
	    width: 3000px;
	}
	
	.all ol {
	    position: absolute;
	    right: 10px;
	    bottom: 10px;
	    line-height: 20px;
	    text-align: center;
	}
	
	.all ol li {
	    float: left;
	    width: 20px;
	    height: 20px;
	    background: #fff;
	    border: 1px solid #ccc;
	    margin-left: 10px;
	    cursor: pointer;
	}
	
	.all ol li.current {
	    background: yellow;
	}
	
	#arr {
	    display: none;
	}
	
	#arr span {
	    width: 40px;
	    height: 40px;
	    position: absolute;
	    left: 5px;
	    top: 50%;
	    margin-top: -20px;
	    background: #000;
	    cursor: pointer;
	    line-height: 40px;
	    text-align: center;
	    font-weight: bold;
	    font-family: '黑体';
	    font-size: 30px;
	    color: #fff;
	    opacity: 0.3;
	    border: 1px solid #fff;
	}
	
	#arr #right {
	    right: 5px;
	    left: auto;
	}
	
</style>